<template>
  <div class="userinfo">
    <div class="list1">
      <h3>居民管理</h3>
    </div>
    <div class="list2">
      <el-form
        :inline="true"
        :model="formUserinfo"
        ref="refUserinfo"
        class="demo-form-inline"
      >
        <el-form-item label="楼栋ID">
          <el-select v-model="formUserinfo.buildingid" style="width: 200px">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="formUserinfo.name"
            placeholder="居民姓名"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            v-model="formUserinfo.mobile"
            placeholder="居民电话"
            style="width: 180px"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input
            v-model="formUserinfo.houseno"
            placeholder="房间号"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="formUserinfo.usertype" style="width: 130px">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="list3">
        <el-button type="primary" @click="cha">查询</el-button>
        <!-- <el-button type="primary">添加</el-button> -->
        <el-button type="primary" @click="tian"
          >添加</el-button
        >
        <userinfo-dialog ref="Userinforef"></userinfo-dialog>
        <el-button type="danger">批量删除</el-button>
        <el-button type="success">批量审核</el-button>
      </div>
      <div class="list4">
        <commontable
          :tableConfig="tableConfig"
          :tableColumns="tableColumns"
          :tableData="tableData"
        ></commontable>
      </div>
      <fee-dialog
        ref="feeDialog"

        :plot1="plot1"
        :title="title"
      ></fee-dialog>
    </div>
  </div>
</template>
<script>
import commontable from '@/components/login/pack/commontable.vue'
import FeeDialog from '@/components/login/content/FeeDialog.vue'
import UserinfoDialog from '@/components/login/content/UserinfoDialog.vue'
export default {
  components: { commontable, FeeDialog, UserinfoDialog },
  name: 'UserinfoV',
  data () {
    return {
      formUserinfo: {
        buildingid: '',
        name: '',
        mobile: '',
        houseno: '',
        usertype: ''
      },
      tableConfig: {
        // 复选框 true和false控制 显示与隐藏
        selection: true,
        // 按钮是否有权限
        addButton: true,
        editButton: true,
        delButton: true,
        // 分页是否显示
        isPagination: true,
        total: 0
      },
      tableColumns: [
        { prop: 'id', label: 'id' },
        { prop: 'photo', label: '头像' },
        { prop: 'name', label: '姓名' },
        { prop: 'usertype', label: '业主类型' },
        { prop: 'sex', label: '性别' },
        { prop: 'memberid', label: '身份证号' },
        { prop: 'mobile', label: '手机号' },
        { prop: 'usernative', label: '籍贯' },
        { prop: 'nation', label: '民族' },
        { prop: 'building', label: '小区' },
        { prop: 'houseid', label: '房间号' },
        { prop: 'state', label: '审核状态', flag: 'auditState' }
      ],
      // 数据
      tableData: [],
      // 分页
      config: {
        page: 1,
        psize: 5
      },
      ids: [],
      title: 'add',
      plot1: []

    }
  },
  created () {
    // 页面一打开获取数据
    this.getUserinfoList()
  },
  methods: {
    // 获取当前页的数据
    async getUserinfoList () {
      const res = await this.$api.Estate.reqUserinfoPlot(this.config)
      console.log(res)
      // 渲染数据到表格
      this.tableData = res.data.data.list
    },
    // 查询
    // cha () {
    //   this.config = { ...this.config, ...this.formUserinfo}
    //   this.getUserinfoList()
    //   console.log(this.config)
    // }
    cha () {
      this.config = { ...this.config, ...this.formUserinfo }
      this.getUserinfoList()
    },
    tian () {
      this.$refs.Userinforef.dialogFormVisible = true
      const sss = this.$api.Estate.reqUserinfoadd()
      console.log(sss)
    }
  }
}
</script>
<style lang="less" scoped>
.userinfo {
  padding: 0 !important;
  .list1 {
    width: 100%;
    height: 49px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    h1 {
      color: #427ff4;
    }
  }
}

</style>
